<template>
    <!-- 侧边栏 -->
  <view class="sidebar" :class="{ open: isSidebarOpen }">
    <view class="sidebar-header">
      <text class="sidebar-title">菜单</text>
      <view class="close-sidebar-icon" @tap="toggleSidebar">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
      </view>
    </view>
    <view class="sidebar-content">
      <view class="sidebar-item" @tap="navigateTo('myMembership')">我的会员</view>
      <view class="sidebar-item" @tap="navigateTo('myCredit')">我的信用分</view>
      <view class="sidebar-item" @tap="navigateTo('contactPresident')">我联系分会长</view>
      <view class="sidebar-item" @tap="navigateTo('activityManagement')">活动管理</view>
      <view class="sidebar-item" @tap="navigateTo('presidentPanel')">分会长面板</view>
      <view class="sidebar-item" @tap="navigateTo('settings')">设置</view>
    </view>
  </view>
  <view v-if="isSidebarOpen" class="sidebar-overlay" @tap="toggleSidebar"></view>
  <view class="container">
    <!-- 头部 -->
    <view class="header">
      <view class="hamburger-icon" @tap="toggleSidebar" style="position: absolute; left: 5rpx; top: 50rpx; z-index: 9;">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <line x1="3" y1="12" x2="21" y2="12"></line>
          <line x1="3" y1="6" x2="21" y2="6"></line>
          <line x1="3" y1="18" x2="21" y2="18"></line>
        </svg>
      </view>
      <view class="header-content">
        <view class="logo-container">
          <image
            class="logo"
            src="/static/images/logo.png"
            mode="aspectFill"
          ></image>
          <!-- <text class="app-name">咕噜猫读书会</text> -->
        </view>
        <view class="header-actions">
          <view class="notification-icon">
            <!-- <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="action-icon"
            >
              <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
              <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
            </svg>
            <text class="badge">3</text> -->
          </view>
          <view class="settings-icon">
            <!-- <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="action-icon"
            >
              <circle cx="12" cy="12" r="3"></circle>
              <path
                d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
              ></path>
            </svg> -->
          </view>
        </view>
      </view>
    </view>

    <!-- 用户资料卡片 -->
    <view class="profile-banner">
      <view class="profile-banner-bg"></view>
      <view class="profile-card">
        <view class="profile-avatar-container">
          <image
            class="profile-avatar"
            src="https://img2.baidu.com/it/u=3450607310,2815392340&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800"
            mode="aspectFill"
          ></image>
          <view class="edit-avatar" @tap="editAvatar">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="edit-icon"
            >
              <path
                d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"
              ></path>
              <path
                d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"
              ></path>
            </svg>
          </view>
        </view>

        <view class="profile-info">
          <view class="profile-name-container">
            <text class="profile-name">阅读爱好者</text>
            <text class="profile-badge">Lv.3</text>
            <view class="member-badge">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="badge-icon"
              >
                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
              </svg>
              <text>会员</text>
            </view>
          </view>

          <text class="profile-id">ID: 10086123</text>

          <view class="progress-container">
            <view class="progress-labels">
              <text>信誉分: 280</text>
              <text>1000</text>
            </view>
            <view class="progress-bar">
              <view class="progress-fill" style="width: 28%"></view>
            </view>
            <view class="progress-labels">
              <text class="progress-label">当前等级</text>
              <text class="progress-label">下一等级</text>
            </view>
          </view>

          <view class="stats-container">
            <view class="stat-item">
              <text class="stat-value">12</text>
              <text class="stat-label">参与活动</text>
            </view>
            <view class="stat-item">
              <text class="stat-value">5</text>
              <text class="stat-label">发起活动</text>
            </view>
            <view class="stat-item">
              <text class="stat-value">3</text>
              <text class="stat-label">收藏活动</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 成就徽章 -->
    <!-- <view class="section">
      <view class="section-card">
        <view class="section-header">
          <view class="section-title">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="section-icon"
            >
              <circle cx="12" cy="8" r="7"></circle>
              <polyline
                points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"
              ></polyline>
            </svg>
            <text>成就徽章</text>
          </view>
          <text class="view-all" @tap="viewAllBadges">查看全部</text>
        </view>

        <view class="achievements-grid">
          <view
            v-for="(badge, index) in badges"
            :key="index"
            class="badge-item"
            :class="{ unlocked: badge.unlocked }"
          >
            <view class="badge-icon" :class="badge.colorClass">
              <svg
                v-if="badge.icon === 'icon-book-open'"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="badge-svg"
              >
                <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
                <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
              </svg>
              <svg
                v-else-if="badge.icon === 'icon-calendar'"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="badge-svg"
              >
                <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                <line x1="16" y1="2" x2="16" y2="6"></line>
                <line x1="8" y1="2" x2="8" y2="6"></line>
                <line x1="3" y1="10" x2="21" y2="10"></line>
              </svg>
              <svg
                v-else-if="badge.icon === 'icon-users'"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="badge-svg"
              >
                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                <circle cx="9" cy="7" r="4"></circle>
                <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
              </svg>
              <svg
                v-else-if="badge.icon === 'icon-award'"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="badge-svg"
              >
                <circle cx="12" cy="8" r="7"></circle>
                <polyline
                  points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"
                ></polyline>
              </svg>
            </view>
            <text class="badge-name">{{ badge.name }}</text>
          </view>
        </view>
      </view>
    </view> -->

    <!-- 活动标签页 -->
    <view class="section">
      <view class="section-card tab-container">
        <view class="tabs">
          <view
            v-for="(tab, index) in tabs"
            :key="index"
            class="tab"
            :class="{ active: currentTab === tab.value }"
            @tap="changeTab(tab.value)"
          >
            {{ tab.label }}
          </view>
        </view>

        <view class="tab-content">
          <view v-if="currentTab === 'upcoming'" class="activity-list">
            <view
              v-for="(activity, index) in upcomingActivities"
              :key="index"
              class="activity-item"
              @tap="navigateToActivity(activity.id)"
            >
              <image
                class="activity-image"
                :src="activity.image"
                mode="aspectFill"
              ></image>
              <view class="activity-content">
                <view class="activity-header">
                  <text class="activity-title">{{ activity.title }}</text>
                  <text
                    class="activity-status"
                    :class="activity.statusClass"
                    >{{ activity.status }}</text
                  >
                </view>
                <view class="activity-info">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    class="info-icon"
                  >
                    <rect
                      x="3"
                      y="4"
                      width="18"
                      height="18"
                      rx="2"
                      ry="2"
                    ></rect>
                    <line x1="16" y1="2" x2="16" y2="6"></line>
                    <line x1="8" y1="2" x2="8" y2="6"></line>
                    <line x1="3" y1="10" x2="21" y2="10"></line>
                  </svg>
                  <text class="info-text">{{ activity.time }}</text>
                </view>
                <view class="activity-info">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    class="info-icon"
                  >
                    <path
                      d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"
                    ></path>
                    <circle cx="12" cy="10" r="3"></circle>
                  </svg>
                  <text class="info-text">{{ activity.location }}</text>
                </view>
              </view>
            </view>
          </view>

          <view v-if="currentTab === 'past'" class="activity-list">
            <view
              v-for="(activity, index) in pastActivities"
              :key="index"
              class="activity-item"
              @tap="navigateToActivity(activity.id)"
            >
              <image
                class="activity-image"
                :src="activity.image"
                mode="aspectFill"
              ></image>
              <view class="activity-content">
                <view class="activity-header">
                  <text class="activity-title">{{ activity.title }}</text>
                  <text class="activity-status completed">{{
                    activity.status
                  }}</text>
                </view>
                <view class="activity-info">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    class="info-icon"
                  >
                    <rect
                      x="3"
                      y="4"
                      width="18"
                      height="18"
                      rx="2"
                      ry="2"
                    ></rect>
                    <line x1="16" y1="2" x2="16" y2="6"></line>
                    <line x1="8" y1="2" x2="8" y2="6"></line>
                    <line x1="3" y1="10" x2="21" y2="10"></line>
                  </svg>
                  <text class="info-text">{{ activity.time }}</text>
                </view>
                <view class="activity-info">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    class="info-icon"
                  >
                    <path
                      d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"
                    ></path>
                    <circle cx="12" cy="10" r="3"></circle>
                  </svg>
                  <text class="info-text">{{ activity.location }}</text>
                </view>
              </view>
            </view>
          </view>

          <view v-if="currentTab === 'created'" class="activity-list">
            <view
              v-for="(activity, index) in createdActivities"
              :key="index"
              class="activity-item"
              @tap="navigateToActivity(activity.id)"
            >
              <image
                class="activity-image"
                :src="activity.image"
                mode="aspectFill"
              ></image>
              <view class="activity-content">
                <view class="activity-header">
                  <text class="activity-title">{{ activity.title }}</text>
                  <text
                    class="activity-status"
                    :class="activity.statusClass"
                    >{{ activity.status }}</text
                  >
                </view>
                <view class="activity-info">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    class="info-icon"
                  >
                    <rect
                      x="3"
                      y="4"
                      width="18"
                      height="18"
                      rx="2"
                      ry="2"
                    ></rect>
                    <line x1="16" y1="2" x2="16" y2="6"></line>
                    <line x1="8" y1="2" x2="8" y2="6"></line>
                    <line x1="3" y1="10" x2="21" y2="10"></line>
                  </svg>
                  <text class="info-text">{{ activity.time }}</text>
                </view>
                <view class="activity-info">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    class="info-icon"
                  >
                    <path
                      d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"
                    ></path>
                    <circle cx="12" cy="10" r="3"></circle>
                  </svg>
                  <text class="info-text">{{ activity.location }}</text>
                </view>
                <view class="activity-management">
                  <text class="participants-info"
                    >已报名: {{ activity.participants }}人</text
                  >
                  <button
                    class="manage-button"
                    @tap.stop="manageActivity(activity.id)"
                  >
                    管理
                  </button>
                </view>
              </view>
            </view>
          </view>

          <view v-if="currentTab === 'pending'" class="activity-list">
            <view
              v-for="(activity, index) in pendingActivities"
              :key="index"
              class="activity-item"
              @tap="navigateToActivity(activity.id)"
            >
              <image
                class="activity-image"
                :src="activity.image"
                mode="aspectFill"
              ></image>
              <view class="activity-content">
                <view class="activity-header">
                  <text class="activity-title">{{ activity.title }}</text>
                  <text class="activity-status pending">{{
                    activity.status
                  }}</text>
                </view>
                <view class="activity-info">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    class="info-icon"
                  >
                    <rect
                      x="3"
                      y="4"
                      width="18"
                      height="18"
                      rx="2"
                      ry="2"
                    ></rect>
                    <line x1="16" y1="2" x2="16" y2="6"></line>
                    <line x1="8" y1="2" x2="8" y2="6"></line>
                    <line x1="3" y1="10" x2="21" y2="10"></line>
                  </svg>
                  <text class="info-text">{{ activity.time }}</text>
                </view>
                <view class="activity-info">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    class="info-icon"
                  >
                    <path
                      d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"
                    ></path>
                    <circle cx="12" cy="10" r="3"></circle>
                  </svg>
                  <text class="info-text">{{ activity.location }}</text>
                </view>
                <view class="activity-management">
                  <text class="participants-info"
                    >已报名: {{ activity.participants }}人</text
                  >
                  <button
                    class="manage-button"
                    @tap.stop="manageActivity(activity.id)"
                  >
                    管理
                  </button>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from "vue";
import sheep from "@/sheep";
sheep.$store("user").isLogin = true;

const isSidebarOpen = ref(false);

const toggleSidebar = () => {
isSidebarOpen.value = !isSidebarOpen.value;
};

const navigateTo = (item) => {
console.log('Navigating to:', item);
// 在这里实现具体的页面跳转逻辑，例如使用 uni.navigateTo
// uni.navigateTo({ url: '/pages/book/settings' });
toggleSidebar(); // 点击后关闭侧边栏
};

// 响应式状态
const currentTab = ref("upcoming");

// 徽章数据
const badges = ref([
{
  name: "阅读达人",
  icon: "icon-book-open",
  unlocked: true,
  colorClass: "blue-gradient",
},
{
  name: "活动组织者",
  icon: "icon-calendar",
  unlocked: true,
  colorClass: "green-gradient",
},
{
  name: "社区贡献者",
  icon: "icon-users",
  unlocked: false,
  colorClass: "gray-gradient",
},
{
  name: "评论之星",
  icon: "icon-award",
  unlocked: false,
  colorClass: "gray-gradient",
},
]);

// 标签页数据
const tabs = ref([
{
  label: "待参加",
  value: "upcoming",
},
{
  label: "已参加",
  value: "past",
},
{
  label: "已发起",
  value: "created",
},
{
  label: "待审核",
  value: "pending",
},
]);

// 待参加活动数据
const upcomingActivities = ref([
{
  id: 1,
  title: "《百年孤独》读书分享会",
  time: "2025年4月15日 14:00-16:00",
  location: "北京市朝阳区国贸中心",
  status: "即将开始",
  statusClass: "upcoming",
  image: "https://imagecgr.oss-cn-beijing.aliyuncs.com/JDwenxue.jpg",
},
{
  id: 2,
  title: "科幻小说创作交流会",
  time: "2025年4月20日 19:00-21:00",
  location: "线上活动",
  status: "已报名",
  statusClass: "registered",
  image: "https://imagecgr.oss-cn-beijing.aliyuncs.com/kehuan.jpg",
},
]);

// 已参加活动数据
const pastActivities = ref([
{
  id: 3,
  title: "《人类简史》读书会",
  time: "2025年3月25日 14:00-16:00",
  location: "北京市海淀区中关村图书馆",
  status: "已完成",
  image: "/static/images/activity-3.jpg",
},
{
  id: 4,
  title: "古典文学鉴赏",
  time: "2025年3月15日 15:00-17:00",
  location: "线上活动",
  status: "已完成",
  image: "/static/images/activity-4.jpg",
},
]);

// 已发起活动数据
const createdActivities = ref([
{
  id: 5,
  title: "现代诗歌赏析与创作",
  time: "2025年5月10日 15:00-17:00",
  location: "北京市朝阳区三里屯",
  status: "报名中",
  statusClass: "registered",
  image: "/static/images/activity-5.jpg",
  participants: 8,
},
]);

// 待审核活动数据
const pendingActivities = ref([
{
  id: 6,
  title: "外国文学经典导读",
  time: "2025年5月20日 19:00-21:00",
  location: "线上活动",
  status: "审核中",
  image: "/static/images/activity-6.jpg",
  participants: 0,
},
]);

// 方法
const changeTab = (tab) => {
currentTab.value = tab;
};

const navigateToActivity = (id) => {
uni.navigateTo({
  url: `/pages/activity/activity?id=${id}`,
});
};

const navigateToHome = () => {
uni.navigateTo({
  url: "/pages/index/index",
});
};

const navigateToDiscover = () => {
uni.showToast({
  title: "发现页面开发中",
  icon: "none",
});
};

const viewAllBadges = () => {
uni.showToast({
  title: "徽章页面开发中",
  icon: "none",
});
};

const editAvatar = () => {
uni.showToast({
  title: "头像编辑功能开发中",
  icon: "none",
});
};

const manageActivity = (id) => {
uni.showToast({
  title: "活动管理功能开发中",
  icon: "none",
});
};
</script>

<style lang="scss">
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
background-color: #ffffff;
padding-bottom: 120rpx;
}

/* 头部样式 */
.header {
background-color: #ffffff;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

&-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.logo {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
}

.app-name {
  font-size: 36rpx;
  font-weight: bold;
  background-image: linear-gradient(to right, #e11d48, #f43f5e);
  -webkit-background-clip: text;
  color: transparent;
}

&-actions {
  display: flex;
  align-items: center;
  gap: 24rpx;
}

.notification-icon {
  position: relative;
}

.action-icon {
  color: #6b7280;
}

.badge {
  position: absolute;
  top: -8rpx;
  right: -8rpx;
  width: 32rpx;
  height: 32rpx;
  border-radius: 50%;
  background-color: #e11d48;
  color: white;
  font-size: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2rpx 4rpx rgba(225, 29, 72, 0.3);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
}

/* 用户资料卡片 */
.profile-banner {
position: relative;
padding-top: 150rpx;

&-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 300rpx;
  background-image:  url('https://img0.baidu.com/it/u=1325804653,2726153251&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1422')
}
}

.profile-card {
position: relative;
margin: 0 30rpx;
background-color: white;
border-radius: 24rpx;
padding: 32rpx;
box-shadow: 0 8rpx 20rpx rgba(225, 29, 72, 0.15);
border-bottom: 4rpx solid #e11d48;

.profile-avatar-container {
  position: relative;
  width: 160rpx;
  height: 160rpx;
  margin: -100rpx auto 24rpx;
}

.profile-avatar {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  border: 8rpx solid white;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.edit-avatar {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  background-color: #e11d48;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4rpx solid white;

  .edit-icon {
    color: white;
  }
}

.profile-info {
  text-align: center;
}

.profile-name-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16rpx;
  margin-bottom: 8rpx;
}

.profile-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
}

.profile-badge {
  background-color: #e11d48;
  color: white;
  font-size: 24rpx;
  padding: 4rpx 16rpx;
  border-radius: 4rpx;
}

.member-badge {
  background-color: #fff1f2;
  color: #e11d48;
  font-size: 24rpx;
  padding: 4rpx 16rpx;
  border-radius: 4rpx;
  border: 1px solid #fecdd3;
  display: flex;
  align-items: center;
  gap: 4rpx;
  margin-left: auto;

  .badge-icon {
    color: #e11d48;
  }
}

.profile-id {
  font-size: 28rpx;
  color: #9ca3af;
  margin-bottom: 24rpx;
}

.progress-container {
  margin-bottom: 24rpx;
}

.progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 24rpx;
  color: #6b7280;
  margin-bottom: 8rpx;

  &:last-child {
    margin-top: 8rpx;
    margin-bottom: 0;
  }
}

.progress-bar {
  height: 16rpx;
  background-color: #f3f4f6;
  border-radius: 8rpx;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background-color: #e11d48;
  border-radius: 8rpx;
}

.progress-label {
  font-size: 24rpx;
  color: #9ca3af;
}

.stats-container {
  display: flex;
  justify-content: space-around;
  margin-top: 32rpx;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #e11d48;
}

.stat-label {
  font-size: 24rpx;
  color: #6b7280;
}
}

/* 成就徽章 */
.section {
margin-top: 30rpx;
padding: 0 30rpx;
}

.section-card {
background-color: white;
border-radius: 24rpx;
padding: 32rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
position: relative;
border-top: 4rpx solid #e11d48;

&.tab-container {
  padding: 0;
  overflow: hidden;

  .tabs {
    padding: 8rpx;
    background-color: #fee2e2;
    border-radius: 24rpx 24rpx 0 0;
  }

  .tab-content {
    padding: 32rpx;
  }
}
}

.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24rpx;
}

.section-title {
font-size: 32rpx;
font-weight: bold;
color: #333333;
display: flex;
align-items: center;

.section-icon {
  color: #e11d48;
  margin-right: 8rpx;
}
}

.view-all {
font-size: 24rpx;
color: #e11d48;
font-weight: 500;
}

.achievements-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24rpx;

.badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;

  &.unlocked {
    .badge-name {
      color: #333333;
    }
  }
}

.badge-icon {
  width: 112rpx;
  height: 112rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

  .badge-svg {
    color: white;
  }

  &.blue-gradient {
    background-image: linear-gradient(to bottom right, #e11d48, #f43f5e);
  }

  &.green-gradient {
    background-image: linear-gradient(to bottom right, #10b981, #059669);
  }

  &.gray-gradient {
    background-image: linear-gradient(to bottom right, #9ca3af, #6b7280);
  }
}

.badge-name {
  font-size: 24rpx;
  color: #9ca3af;
  text-align: center;
}
}

/* 活动标签页 */
.tabs {
display: flex;
border-radius: 16rpx 16rpx 0 0;
}

.tab {
flex: 1;
text-align: center;
padding: 16rpx 0;
font-size: 28rpx;
color: #6b7280;
border-radius: 12rpx;
position: relative;
transition: all 0.3s ease;

&.active {
  background-color: white;
  color: #e11d48;
  font-weight: 500;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
}

&.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  width: 60%;
  height: 4rpx;
  background-color: #e11d48;
  border-radius: 4rpx;
}
}

/* 活动项 */
.activity-list {
display: flex;
flex-direction: column;
gap: 24rpx;
}

.activity-item {
display: flex;
background-color: white;
border-radius: 16rpx;
overflow: hidden;
border: 1px solid #fee2e2;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;

&:active {
  transform: translateY(2rpx);
  box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.05);
}

.activity-image {
  width: 160rpx;
  height: 160rpx;
  object-fit: cover;
}

.activity-content {
  flex: 1;
  padding: 24rpx;
}

.activity-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16rpx;
}

.activity-title {
  font-size: 28rpx;
  font-weight: 500;
  color: #333333;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.activity-status {
  font-size: 20rpx;
  color: white;
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
  background-image: linear-gradient(to right, #e11d48, #f43f5e);

  &.upcoming {
    background-image: linear-gradient(to right, #10b981, #059669);
  }

  &.registered {
    background-image: linear-gradient(to right, #e11d48, #f43f5e);
  }

  &.completed {
    background-image: linear-gradient(to right, #6b7280, #4b5563);
  }

  &.pending {
    background-image: linear-gradient(to right, #f59e0b, #d97706);
  }
}

.activity-info {
  display: flex;
  align-items: center;
  gap: 8rpx;
  margin-bottom: 8rpx;

  .info-icon {
    color: #9ca3af;
    flex-shrink: 0;
  }

  .info-text {
    font-size: 24rpx;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.activity-management {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16rpx;
}

.participants-info {
  font-size: 24rpx;
  color: #6b7280;
}

.manage-button {
  font-size: 24rpx;
  color: #e11d48;
  background-color: white;
  border: 1px solid #e11d48;
  border-radius: 20rpx;
  padding: 4rpx 16rpx;
  line-height: 1.5;
}
}

/* 底部导航 */
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 120rpx;
background-color: white;
border-top: 1px solid #f3f4f6;
display: flex;
z-index: 40;

&-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: #9ca3af;

  &.active {
    color: #e11d48;
  }

  .tab-icon-container {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8rpx;
  }

  .tab-icon {
    color: #9ca3af;
  }

  &.active .tab-icon-container {
    background-color: #fff1f2;
  }

  &.active .tab-icon {
    color: #e11d48;
  }
}

.tab-text {
  font-size: 24rpx;
}
}
.hamburger-icon {
position: absolute;
left: 30rpx; /* Adjusted to be on the left */
top: 50%;
transform: translateY(-50%);
z-index: 1001; /* Ensure it's above other header content */
padding: 10rpx;
color: #333; /* Adjust color as needed */
cursor: pointer;
}

.sidebar-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
}

.sidebar {
position: fixed;
top: 0;
left: -70%; /* Start off-screen */
width: 70%;
max-width: 300px; /* Added max-width for better responsiveness */
height: 100%;
background-color: #ffffff;
box-shadow: 2rpx 0 10rpx rgba(0, 0, 0, 0.1);
z-index: 1000;
transition: left 0.3s ease-in-out;
display: flex;
flex-direction: column;
}

.sidebar.open {
left: 0;
}

.sidebar-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30rpx;
border-bottom: 1rpx solid #eee;
}

.sidebar-title {
font-size: 32rpx;
font-weight: bold;
color: #333;
}

.close-sidebar-icon {
cursor: pointer;
}

.close-sidebar-icon svg {
width: 40rpx;
height: 40rpx;
color: #555;
}

.sidebar-content {
flex-grow: 1;
padding-top: 20rpx;
overflow-y: auto; /* Allow scrolling for many items */
}

.sidebar-item {
padding: 30rpx 40rpx;
font-size: 30rpx;
color: #333;
border-bottom: 1rpx solid #f5f5f5;
cursor: pointer;
transition: background-color 0.2s ease;
}

.sidebar-item:hover {
background-color: #f0f0f0;
}

.sidebar-item:last-child {
border-bottom: none;
}

/* Adjust header content padding to make space for hamburger icon */
.header-content {
position: relative;
padding-left: 100rpx; /* 增加左侧内边距确保汉堡菜单有足够空间 */
}
</style>
